<template>
    <!--分包商季度评价/供应商年度评价高级搜索 -->
    <div class="searchDialog">
        <div class="e-form">
            <el-form label-width="120px" :model="searchForm">
                <el-row>
                    <el-col :span="12" v-if="type == 1">
                        <el-form-item label="分包商类型：">
                            <el-checkbox
                                :indeterminate="isIndeterminate"
                                v-model="checkAll"
                                @change="handleCheckAllChange"
                                >全选</el-checkbox
                            >
                            <el-checkbox-group
                                v-model="searchForm.subcontractorTypeKey"
                                @change="handleCheckedCitiesChange"
                            >
                                <el-checkbox
                                    v-for="item in typeList"
                                    :key="item.kvId"
                                    :label="item.kvKey"
                                    :value="item.kvId"
                                ></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="18" v-else>
                        <el-form-item label="供应商类型：">
                            <el-checkbox
                                :indeterminate="isIndeterminate"
                                v-model="checkAll"
                                @change="handleCheckAllChange"
                                >全选</el-checkbox
                            >
                            <el-checkbox-group
                                v-model="searchForm.subcontractorTypeKey"
                                @change="handleCheckedCitiesChange"
                            >
                                <el-checkbox
                                    v-for="item in typeList"
                                    :key="item.kvId"
                                    :label="item.kvKey"
                                    :value="item.kvId"
                                ></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                     <el-col :span="12" v-if="type == 1">
                        <el-form-item label="评价季度：">
                            <el-checkbox
                                :indeterminate="isIndeterminate"
                                v-model="checkAll"
                                @change="handleCheckAllChange1"
                                >全选</el-checkbox
                            >
                            <el-checkbox-group
                                v-model="searchForm.quarterName"
                                @change="handleCheckedCitiesChange1"
                            >
                                <el-checkbox
                                    v-for="item in evaluationQuarterList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item
                            label="分包商名称："
                            prop="subcontractorName"
                            v-if="type == 1"
                        >
                            <el-input
                                v-model="searchForm.subcontractorName"
                                placeholder="请填写"
                                maxlength="100"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            v-else
                            label="供应商名称："
                            prop="subcontractorName"
                        >
                            <el-input
                                v-model="searchForm.subcontractorName"
                                placeholder="请填写"
                                maxlength="100"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="统一社会信用代码：">
                            <el-input
                                v-model="searchForm.creditCode"
                                placeholder="请填写"
                                maxlength="18"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                  <el-row>
                    <el-col :span="12">
                        <el-form-item label="机构：">
                            <el-input
                                v-model="searchForm.manageOrgName"
                                placeholder="请选择"
                                readonly
                            >
                                <i
                                    slot="suffix"
                                    class="el-input__icon el-icon-document-copy"
                                    @click="onSelectOrg"
                                ></i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="评价日期：" prop="contractTypeIds">
                            <el-date-picker
                                v-model="value1"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="合同名称：" prop="contractTypeIds">
                            <el-input
                                v-model="searchForm.startCapital"
                                placeholder="请填写"
                                maxlength="100"
                                style="margin-right: 5px"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item width="200" label="状态：">
                            <CheckAll :chackdData.sync="stateList"   @checkdData="handleCheckedCitiesChange2" ref="checkedState"/>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
        </div>
        <div style="display: none">{{ localSearchData }}</div>
    </div>
</template>

<script>
import call from '@/api/OutsourcingartyAdmin/getAllType.js'
import { selectDataClient } from '@/utils/common'
import CheckAll from '@/components/common/checkAll'
import { mapMutations } from 'vuex'
export default {
    components: {
        CheckAll
    },
    data () {
        return {
            searchForm: {
                subcontractorTypeKey: [], //分包商类型id
                subcontractorTypeValue: [], //分包商类型名称
                subcontractorName: '', //分包商名称
                creditCode: '', //统一社会信用代码
                stateTypeKey: [], //状态id
                manageOrg: localStorage.getItem('searchOrgId'), //管理单位id
                manageOrgName: localStorage.getItem('searchOrgName'), //管理单位name
                quarter: [], //评价季度
                quarterName: [], //评价季度
                'contractName': '', //合同名称
            },
            type: '', //合同名称：1，分包合同,2，其他合同,3，服务采购合同
            isIndeterminate: true, //分包商类型
            isIndeterminate1: true, //信用等级
            isIndeterminate2: true, //状态
            checkAll: false, //分包商类型
            checkAll1: false, //信用等级
            checkAll2: false, //状态
            typeList: [],
            evaluationQuarterList: [
                { id: 1, name: '第一季度' },
                { id: 2, name: '第二季度' },
                { id: 3, name: '第三季度' },
                { id: 4, name: '第四季度' },
            ], //评价季度数据
            // 状态
            stateList: []
        }
    },
    created () {
        this.type = this.$route.query.type
        this.stateList = this.$store.state.outsourcer.equipData.state//状态
        this.getTypeData() //进入页面获取类型选择框数据
    },
    computed: {
        localSearchData () {
            // 默认设置搜索标志为false，则不进行搜索回调
            const searchForm = this.searchForm
            searchForm.searching = false
            this.setSearchData(searchForm)
            return searchForm
        }
    },
    methods: {
        ...mapMutations(['setSearchData']),
        ...mapMutations(['setSelectedInfo']),
        //获取分包商类型数据
        getTypeData () {
            if (this.type == 1) {
                call.getCredentialTree({ name: '外包方类型', id: '0' }).then(
                    res => {
                        let id = ''
                        // 获取想要的类型id
                        res.map(item => {
                            if (item.kvKey == '分包商') {
                                id = item.kvId
                            }
                        })
                        call.getCredentialTree({
                            name: '外包方类型',
                            id: id
                        }).then(res => {
                            this.typeList = res
                        })
                    }
                )
            } else {
                call.getCredentialTree({ name: '外包方类型', id: '0' }).then(
                    res => {
                        let id = ''
                        // 获取想要的类型id
                        res.map(item => {
                            if (item.kvKey == '供应商') {
                                id = item.kvId
                            }
                        })
                        call.getCredentialTree({
                            name: '外包方类型',
                            id: id
                        }).then(res => {
                            this.typeList = res
                        })
                    }
                )
            }

            call.getCredential('纳税类别').then(res => {
                this.payTaxesTypeList = res
            })
        },
        // 外包方类型全选
        handleCheckAllChange (val) {
            this.searchForm.subcontractorTypeValue = []
            this.searchForm.subcontractorTypeKey = val
                ? this.typeList.map(item => {
                    return item.kvKey
                })
                : []
            this.isIndeterminate = false
            // 循环拿到id
            this.typeList.map(item => {
                this.searchForm.subcontractorTypeValue.push(item.kvValue)
            })
        },
        //外包方类型选择
        handleCheckedCitiesChange (value) {
            this.searchForm.subcontractorTypeValue = []
            let checkedCount = value.length
            this.checkAll = checkedCount === this.typeList.length
            this.isIndeterminate =
                checkedCount > 0 && checkedCount < this.typeList.length
            // 循环拿到id
            this.typeList.map(item => {
                value.map(Valitem => {
                    if (item.kvKey == Valitem) {
                        this.searchForm.subcontractorTypeValue.push(
                            item.kvValue
                        )
                    }
                })
            })
        },
        // 评价季度
        handleCheckAllChange1 (val) {
            this.searchForm.quarter = []
            this.searchForm.quarterName = val
                ? this.evaluationQuarterList.map(item => {
                    return item.id
                })
                : []
            this.isIndeterminate1 = false
            // 循环拿到id
            this.evaluationQuarterList.map(item => {
                this.searchForm.quarter.push(item.id)
            })
        },
        //评价季度
        handleCheckedCitiesChange1 (value) {
            this.searchForm.quarter = []
            let checkedCount = value.length
            this.checkAll1 = checkedCount === this.evaluationQuarterList.length
            this.isIndeterminate1 =
                checkedCount > 0 && checkedCount < this.evaluationQuarterList.length
            // 循环拿到id
            this.evaluationQuarterList.map(item => {
                value.map(Valitem => {
                    if (item.name == Valitem) {
                        this.searchForm.quarter.push(item.id)
                    }
                })
            })
        },
        //外包方类型选择
        handleCheckedCitiesChange2 (value) {
            this.searchForm.stateTypeKey = value
        },
        onSelect (value) {
            if (this.type == 1) {
                // 弹窗选择数据
                selectDataClient({
                    SelectServiceToken: '/config/kv/getDicValueTree', // 客户端对应方法名
                    IsSingleMode: false, // 是否单选 true 单选 false 多选
                    SelectedIDs: [], // 已选中id
                    InitParamsStr: JSON.stringify({
                        dicName:
                            value == '主营范围' ? '外包方主营范围' : '资质等级',
                        parentId: '0'
                    }),
                    Title:
                        value == '主营范围'
                            ? '请选择主营范围'
                            : '请选择资质等级' // 标题
                }).then(val => {
                    // 保存用户选择返回数据到store
                    if (value == '主营范围') {
                        let stringData = []
                        val.map(item => {
                            this.searchForm.main.push(item.kvId)
                            stringData.push(item.kvValue)
                        })
                        this.searchForm.mainName = stringData.toString()
                    } else {
                        let stringData = []
                        val.map(item => {
                            this.searchForm.grade.push(item.kvId)
                            this.searchForm.gradeName.push(item.kvValue)
                            stringData.push(item.kvValue)
                        })
                        this.searchForm.gradeName = stringData.toString()
                    }
                })
            } else {
                // 弹窗选择数据
                selectDataClient({
                    SelectServiceToken: '/common/CategorySelect', // 客户端对应方法名
                    IsSingleMode: false, // 是否单选 true 单选 false 多选
                    SelectedIDs: [], // 已选中id
                    InitParamsStr: JSON.stringify({
                        categoryType: 3, //类别类型1：物资类型，2：设备类型，3：所有类别
                        materialCategoryId: '0', //物资类别父级id
                        equipmentCategoryId: '00000', //设备类别父级id
                        isUpdate: false, //true 基础库调用 false 其他地方调用(设备类别)
                        estimatedMaterialLock: 0, //暂估物资锁(0：否;1：是;null:全部)(物资类别)
                        materialType: 0 //物资类型(0：一般材料;1:：周转材料;null:全部)(物资类别)
                    }),
                    Title: value // 标题
                }).then(val => {
                    let stringData = []
                    val.map(item => {
                        this.searchForm.main.push(item.kvId)
                        stringData.push(item.kvValue)
                    })
                    this.searchForm.mainName = stringData.toString()
                })
            }
        },
        onSelectOrg () {
            selectDataClient({
                SelectServiceToken: '/hr/org/getChildrenOrg', // 客户端对应方法名
                IsSingleMode: false, // 是否单选 true 单选 false 多选
                SelectedIDs: [], // 已选中id(注意：是上一次已选中的id，不是要传的参数，如果第一次选，则传[])
                InitParamsStr: '', // 接口参数(name为模拟参数)
                Title: '选择机构' // 标题
            }).then(val => {
                this.searchForm.manageOrg = [val[0].orgId]
                this.searchForm.manageOrgName = [val[0].orgName]
            })
        }
    }
}
</script>

<style lang="scss" scoped>
//复选框css
::v-deep .el-checkbox {
    margin: 0px 20px 5px 0px;
}
// label
::v-deep .e-form .el-form-item .el-form-item__label {
    width: 140px !important;
}
// 境外单位
::v-deep .clearPadding .vxe-cell {
    padding: 0;
}
::v-deep .clearPaddingLeft .vxe-cell {
    padding-left: 0px;
}
::v-deep {
    .main-el-switch {
        position: relative;
        .el-switch__core {
            height: 24px;
            border-radius: 12px;
            &:after {
                left: 4px;
                top: 3px;
            }
        }
        &.el-switch {
            &.is-checked {
                .el-switch__core {
                    &:after {
                        margin-left: -20px;
                        left: 100%;
                    }
                }
            }
        }
        &.is-checked {
            .el-switch__label--left {
                opacity: 0;
            }
            .el-switch__label--right {
                opacity: 1;
            }
        }
        .el-switch__label {
            position: absolute;
            top: 0;
        }
        .el-switch__label--left {
            right: 0;
            color: #999;
            z-index: 1;
            margin-right: 8px;
        }
        .el-switch__label--right {
            left: 0;
            color: #fff;
            opacity: 0;
            margin-left: 8px;
        }
    }
    // 统一样式
    .searchDialog {
        padding-top: 20px;
        ::v-deep.el-input--suffix {
            i {
                display: flex;
                align-items: center;
            }
        }
        .el-checkbox-group {
            display: flex;
        }
        ::v-deep.el-checkbox {
            display: flex;
            align-items: center;
        }
    }
}
</style>
